<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>button</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 184px;
      height: 30px;
      margin: 100px;
    }

    .search {
      width: 183px;
      height: 100%;
      background: orange;
      border-right: 1px solid #000;
    }

    .search .txt {
      width: 0px;
      height: 30px;
      float: right;
      /* 缩进 隐藏看不到 */
      font-size: 16px;
      text-indent: 1em;
      border: none;
      outline: none;
      transition: width .5s;
      background: yellow;
    }

    .search .active {
      border-left: 1px solid #000;
      /* 原本为184 - 2px边框 - 45px按钮 = 137px */
      width: 137px;
    }

    .search .btn {
      width: 45px;
      height: 30px;
      float: right;
      cursor: pointer;
      border: none;
      outline: none;
    }

    .search .btn img {
      margin-left: 12px;
      display: block;
      width: 20px;
      height: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="search">
      <button class="btn">
        <img src="./images/aside1_03.jpg" alt="">
      </button>
      <input type="text" placeholder="输入关键字搜索..." class="txt">
    </div>
  </div>
  <script>
    /*
      布局思路：
        1：对于btn这个按钮，先右浮动，然后表单再右浮动，这个表单需要缩进1em，然后才看不到
        2：对于点击按钮，弹出的表单的宽度计算 原本为184（父) - 2px边框 - 45px按钮 = 137px
      功能实现思路：
        1：点击按钮的时候，需要给表单元素聚焦 txt.focus() ，并且弹出表单，也就是在原本的基础上，添加了active类
          .search .active {
            border-left: 1px solid #000;
            原本为184 - 2px边框 - 45px按钮 = 137px 
            width: 137px;
          }
        2：为了避免冒泡事件，于是给了父元素阻住冒泡事件（search）  e.stopPropagation(); 
        3：鼠标点击文档的时候，把active类去掉，需要文档点击事件
     */
    var btn = document.querySelector('.btn'),
      txt = document.querySelector('.txt'),
      search = document.querySelector('.search');
    btn.onclick = function () {
      txt.focus();
      txt.className = 'txt active';
    }
    search.onclick = function (e) {
      e.stopPropagation();
    }
    document.addEventListener('click', function () {
      txt.className = 'txt';
    });
  </script>
</body>

</html>